<template>
    <el-menu @click="open" :unique-opened="true" background-color="#222831" text-color="#eeeeee" :collapse="a" active-text-color="#00adb5" :default-active="this.$route.path.slice(4)">
        <div class="sysNmae">天珑后台管理系统</div>
        <!-- <button @click="aa">哎哎哎</button> -->
        <el-submenu :index="layer.id" v-for="layer in menuList" :key="layer.id">

            <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>{{layer.name}}</span>
            </template>

            <div v-for="it in layer.children" :key="it.id">
                <!-- 没有下一级 -->
                <el-menu-item v-if="it.children.length === 0"  @click="menuEvt(it.path)" :index="it.path">{{ it.name }}</el-menu-item>
                <!-- 有下一级 -->
                <div v-else>
                    <el-submenu :index="it.id">
                        <template slot="title">
                            <i class="el-icon-s-promotion" style="{color:'&#xe6be;'}"></i>
                            <span>{{ it.name }}</span>
                        </template>
                        <div :index="layer3.id" v-for="layer3 in it.children" :key="layer3.id">
                            <div v-if="layer3.children.length === 0">
                                <el-menu-item  @click="menuEvt(layer3.path)" :index="layer3.path">{{ layer3.name }}</el-menu-item>
                            </div>

                            <div v-else>
                                <el-menu-item :index="layer.id">我还有</el-menu-item>
                            </div>
                        </div>
                    </el-submenu>
                </div>

            </div>

        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        props: {
            menuList: {
                type: Array,
                default: () => []
            }
        },
        data(){
            return {
                aaaaa:'',
                a:false
            }
        },
        created(){
        },
        methods: {
            aa(){
                this.a = !this.a
            },
            menuEvt(path){
                this.$router.push('/sys' + path)
                // this.$store.commit('mutationmenuActive',path)
            },
            open(){
                console.log(54564456);
            }
        },  
    }
</script>


<style lang="less" scoped>
    .sysNmae{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: white;
        font-weight: 700;
        border-bottom: 1px solid #fff;
    }
       
</style>